<template>
	<el-container class="homecontainer">
	  <el-header>
			 <span>电商后台管理系统</span>
			 <el-button type="info" @click="outinfo">退出</el-button>
	  </el-header>
	  <el-container>
		  <!-- 侧边栏 -->
	    <el-aside :width="iscollapse ? '64px' :'200px'">
			<div class="toggle-button" @click="coggleCollapse">|||</div>
			<!-- 侧边栏侧边菜单区域 -->
				<!--collapse:是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）  -->
				<!--unique-opened: 是否只保持一个子菜单的展开，默认为false    前面需要加:因为将字符串形式转换为传值为true -->
				<!-- collapse-transition: 是否开启折叠动画,默认为true-->
				<!-- router:是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
				<!-- default-active:el-menu中开启（值为string类型），el-menu-item中当前激活菜单的 index（其实就是路由复制给index，之后我们点击路由后，就可以引起高亮） (点击二级菜单高亮显示)-->
			 <el-menu
			       background-color="#333744"
			       text-color="#fff"
			       active-text-color="#409ebb"
				   :collapse="iscollapse"
				   :unique-opened="true"
				   :collapse-transition="false"
				   :router="true"
				   :default-active="activepath">
				   <!-- 一级菜单 -->
				   <!-- 这里动态绑定属性index -->
			       <el-submenu :index="item.id + ''" v-for="item in MenuList" :key="item.id">
					   <!-- 一级菜单模板区域 -->
			         <template slot="title">
						 <!-- 图标 -->
			           <i class="iconfont" :class="icons[item.id]"></i>
					   <!-- 文本 -->
			           <span>{{item.authName}}</span>
			         </template>
					 
					 <!-- 二级菜单 -->
			         <el-menu-item-group>
																		<!--高亮@click="defaultActive('/'+ subitem.path)"  点击传递index的值，从而高亮  -->
			           <el-menu-item :index="'/'+ subitem.path" v-for="subitem in item.children" :key="subitem.id" @click="defaultActive('/'+ subitem.path)">
						  <!-- 一级菜单模板区域 -->
						  <template slot="title">
						  		 <!-- 图标 -->
						    <i class="el-icon-menu"></i>
						    <!-- 文本 -->
						    <span>{{subitem.authName}}</span>
						  </template>
					    </el-menu-item>
			         </el-menu-item-group>
			       </el-submenu>
			     </el-menu>
		</el-aside>
	    <el-main><router-view></router-view></el-main>
	  </el-container>
	</el-container>
</template>

<script>
	export default{
		data(){
			return {
				MenuList:[],
				// 一级菜单图标
				icons:{
					'125':'iconfont icon-user',
					'103':'iconfont icon-tijikongjian',
					'101':'iconfont icon-shangpin',
					'102':'iconfont icon-danju',
					'145':'iconfont icon-baobiao'
				},
				iscollapse:false,
				//存放的是点击二级菜单地址（高亮状态下的二级菜单地址）
				activepath:''
			}
		},
		// 当页面打开后立即获取左侧菜单数据，所以需要添加生命周期函数
		created(){
			this.getMenuList(),
			// 当页面打开，之前我们点击路由后，当前二级菜单可以继续引起高亮
			this.activepath = window.sessionStorage.getItem('activepath')
		},
		methods:{
			//退出功能   基于token退出只需要清除token,然后跳转到登录界面
			outinfo(){
				window.sessionStorage.clear()
				// 跳转到登录界面
				this.$router.push('/login')
			},
			// axios请求获取左侧菜单数据,axios返回的是Promise对象，所以await
			async getMenuList(){
				// 数据在data里面，所以结构data，重命名为res
				// 获取数据之后要显示在页面上，所以上面data里面需要接收这些数据
				const {data:res} = await this.$http.get('menus')
				console.log(res)
				if (res.meta.status != 200) return this.$message.error(res.meta.msg)
				this.MenuList = res.data
			},
			// 点击展开按钮
			coggleCollapse(){
				this.iscollapse = !this.iscollapse
			},
			// 点击高亮，二级菜单的index路由地址存储在本地（sessionStorage）中，然后在将本地的数据存储在default-active中
			defaultActive(path){
				window.sessionStorage.setItem('activepath',path)
				this.activepath = path
			}
		}
	}
</script>

<style lang="less" scoped>
	.homecontainer{
		width: 100%;
		height: 100%;
	}
	.el-header{
		width: 100%;
		background-color: #373D41;
		color: white;
		font-size: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.el-aside{
		width: 100%;
		height: 100%;
		background-color: #333744;
		color: white;
		.el-menu{
			border-right:0
		}
	}
	.el-main{
		width: 100%;
		height: 100%;
		background-color: #EAEDF1;
	}
	.iconfont{
		margin-right: 15px;
	}
	.toggle-button{
		background-color:#4A5064;
		text-align: center;
		line-height: 24px;
		font-size: 10px;
		/* 字符间距 */
		letter-spacing: 0.2em;
		cursor: pointer;
	}
</style>
